<template>
  <div class="playListDetail-container" :class="{ view: songList.length > 0 }">
    <!-- 固定title -->
    <div
      class="fixed-title"
      :style="{ background: 'rgba(206, 61, 62, ' + opacity + ')' }"
    >
      <i class="iconfont  icon-zuojiantou" @click="$router.go(-1)"></i>
      <div>{{ fname }}</div>
    </div>
    <!-- 歌单信息 -->
    <div class="listInfo">
      <!-- 遮罩层 -->
      <div
        class="bg-maskdown"
        :style="{ 'background-image': 'url(' + coverImgUrl + ')' }"
      ></div>
      <div class="bg-maskup"></div>
      <div class="image-box">
        <van-image :src="coverImgUrl"></van-image>
        <div class="number">{{ playCount | countFomat }}</div>
      </div>
      <div class="desInfo">
        <div class="title">{{ name }}</div>
        <div class="creator" v-if="creator.avatarUrl">
          <van-image
            :src="creator.avatarUrl"
            fit="cover"
            round
            width="30"
            height="30"
          ></van-image>
          <span class="nickname">{{ creator.nickname }}</span>
        </div>
      </div>
    </div>
    <!-- 歌单信息 -->

    <!-- 歌单列表 -->
    <div class="songList">
      <van-cell center>
        <div slot="title" class="title" @click="playAll">
          <van-icon name="add-o"></van-icon>
          <span>播放全部</span>
        </div>
      </van-cell>
      <!-- 歌单列表详情 -->
      <!-- <van-list>
        <van-cell v-for="(item, index) in list" :key="index">
          <div class="index">{{ index + 1 }}</div>
          <div class="songInfo">{{ item.al.name }}</div>
        </van-cell>
      </van-list> -->
      <van-row
        v-for="(item, index) in list"
        :key="index"
        @click="playAudio(item)"
        :class="{ on: item.id === audio.id }"
      >
        <van-col span="4" class="index-col">
          {{ index + 1 }}
        </van-col>
        <van-col span="20" class="songInfo">
          <div class="songName">{{ item.name }}</div>
          <div class="singer">{{ item.ar[0].name }}</div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import api from '../../api/index'
export default {
  name: 'playListDetail',
  components: {},
  data() {
    return {
      coverImgUrl: '../../static/default_cover.png',
      name: '歌单标题',
      id: 0,
      fname: '歌单',
      playCount: 0,
      description: '描述描述',
      creator: {
        avatarUrl: '../../static/user-default.png',
        nickname: '昵称'
      },
      list: [],
      opacity: 0
    }
  },
  beforeRouteEnter: (to, from, next) => {
    next(vm => {
      // 根据传过来的ID是否一样，判断加载
      // console.log(vm.id)
      if (parseInt(to.params.id) !== parseInt(vm.id)) {
        vm.loadListDetail()
      }
      if (to.params.coverImg) {
        // 获取songList传入的数据
        vm.coverImgUrl = vm.$route.params.coverImg
        vm.name = vm.$route.params.name
        vm.description = vm.$route.params.desc
        vm.playCount = vm.$route.params.count
        vm.creator = vm.$route.params.creator
        vm.id = vm.$route.params.id
      }
      window.onscroll = () => {
        var opa = window.pageYOffset / 150
        if (opa > 0.5) {
          vm.fname = vm.name
        } else {
          vm.fname = '歌单'
        }
        vm.opacity = window.pageYOffset / 150
      }
    })
  },
  // 路由离开时清除onscroll事件
  beforeRouteLeave: (to, from, next) => {
    window.onscroll = null
    next()
  },
  computed: {
    ...mapGetters(['songList', 'audio', 'currentIndex'])
  },
  watch: {},
  created() {
    // console.log(typeof )
    // this.loadListDetail()
  },
  mounted() {
    // this.$nextTick((=>{
    //   window.scroll
    // }))
    // window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    async loadListDetail() {
      try {
        const { playlist: data } = await this.$http.get(
          api.getPlayListDetail(this.$route.params.id)
        )
        // this.songlist = data
        // this.id = data.id
        // console.log(data)
        this.list = data.tracks
      } catch (err) {
        this.$toast.fail('获取数据失败')
      }
    },
    // handleScroll() {
    //   const topY = window.pageYOffset / 150
    //   if (topY < 0.5) {
    //     this.fname = '歌单'
    //   } else {
    //     this.fname = this.songList.name
    //   }
    //   this.opacity = window.pageYOffset / 100
    // }
    // 点击播放音乐
    playAudio(song) {
      // console.log(song)
      if (song.id === this.audio.id) {
        this.$router.push({
          name: 'playerDetail',
          params: {
            id: song.id
          }
        })
        this.$store.commit('toggleDetail')
        return false
      }
      document.getElementById('audioPlay').pause()
      this.$store.commit('pause')
      var audio1 = {}
      audio1.id = song.id
      audio1.singer = song.ar[0].name // 演唱者
      audio1.albumPic = song.al.picUrl
      audio1.name = song.name
      // 通过Vuex改变状态
      this.$store.commit('addToList', audio1)
      this.$store.dispatch('getSong', audio1.id)
      // this.$store.commit('play')
    },
    // 点击把歌单所有歌曲添加到播放列表里
    playAll() {
      document.getElementById('audioPlay').pause()
      this.$store.commit('pause')
      const items = []
      this.list.forEach(item => {
        items.push({
          albumPic: item.al.picUrl,
          id: item.id,
          name: item.name,
          singer: item.ar[0].name
        })
      })
      if (this.songList.length > 0) {
        this.$store.commit('clearSongList')
      }
      this.$store.commit('addToList', items.reverse())
      // console.log(items)
      this.$store.commit('setCurrentIndex')
      // console.log(this.currentIndex)
      this.$store.dispatch('getSong', items[items.length - 1].id)
    }
  }
}
</script>
<style lang="less" scoped>
@import '../../assets/icon/icon.css';
.view {
  padding-bottom: 108px;
}
.playListDetail-container {
  // height: 2000px;
}
.fixed-title {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  right: 0;
  height: 112px;
  display: flex;
  align-items: center;
  z-index: 99;
  transition: opacity 0.1s;
  i.iconfont {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 16px;
    color: #fff;
    font-size: 50px !important;
  }
  div {
    height: 48px;
    line-height: 48px;
    overflow: hidden;
    font-size: 40px;
    color: #fff;
  }
}
.listInfo {
  height: 468px;
  width: 100%;
  position: relative;
  .bg-maskdown {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: no-repeat center center;
    filter: blur(40px);
    z-index: 2;
  }
  .bg-maskup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 3;
  }
  .image-box {
    position: absolute;
    top: 120px;
    left: 40px;
    width: 282px;
    z-index: 3;
    .van-image {
      width: 100%;
      height: auto;
    }
    .number {
      text-align: right;
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      width: 100%;
      height: 40px;
      background-color: rgba(0, 0, 0, 0.2);
      color: #eee;
      line-height: 40px;
      font-size: 30px;
    }
  }
  .desInfo {
    position: absolute;
    top: 150px;
    left: 370px;
    width: 350px;
    z-index: 3;
    overflow: hidden;
    .title {
      width: 100%;
      height: auto;
      font-size: 28px;
      color: #fff;
    }
    .creator {
      display: flex;
      padding-top: 20px;
      align-items: center;
      .nickname {
        font-size: 28px;
        color: #fff;
      }
    }
  }
}
/deep/ .songList {
  padding: 0 20px;
  padding-bottom: 30px;
  .van-cell {
    padding: 0 !important;
    height: 74px;
    line-height: 74px;
    border-bottom: 2px solid #eee;
    margin-bottom: 20px;
    .title {
      padding-left: 20px;
      display: flex;
      align-items: center;
      .van-icon {
        font-size: 40px;
        color: #000;
        font-weight: bold;
        padding-right: 16px;
      }
      span {
        font-size: 30px;
      }
    }
  }
  // .index-col {
  //   .index {
  //     width: 80px;
  //     height: 80px;
  //     text-align: center;
  //   }
  // }
  .van-row {
    display: flex;
    align-items: center;
    .index-col {
      text-align: center;
      font-size: 38px;
      color: #757575;
      font-weight: bold;
    }
    .songInfo {
      border-bottom: 2px solid #eee;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 20px 0;
      .songName {
        font-size: 34px;
        color: #000;
      }
      .singer {
        font-size: 28px;
      }
    }
  }
  .on {
    .index-col {
      color: blue;
    }
    .songInfo {
      .songName {
        color: red !important;
      }
    }
  }
}
</style>
